<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.css">
<style type="text/css">
.mygreen{
	color:green;
}
.myred{
	color:red;
} 
.input-group{
margin-bottom:20p
x;	
}
.card{
margin-top:20px;		
margin-bottom:20px;	
}
</style>
</head>
<body>
<div class="container">
<div class="card">
  <div class="card-header">
    算术练习
  </div>
  <div class="card-body">
    <h5 class="card-title">温馨提示:</h5>
    <p id="tip" class="card-text">您好!</p>
    <a href="http://www.exesoft.cn" class="btn btn-primary">本人主页</a>
  </div>
</div>
<label for="FirstNum">请输入第1个数:</label>
<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg1">First Num:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </div>
  <input id="FirstNum" step="0.01" min="0" max="100" type="number" value="0" class="form-control" aria-describedby="inputGroup-sizing-lg"/>
</div>
<label for="SecondNum">请输入第2个数:</label>
<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Second Num:</span>
  </div>
 <input id="SecondNum" step="0.01" min="0" max="100" type="number" value="0" class="form-control" aria-describedby="inputGroup-sizing-lg"/>
</div>
<label for="SumNum">请输入第3个数:</label>
<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Sum Num:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </div>
  <input id="SumNum" step="0.01" min="0" max="100" type="number" value="0" class="form-control" aria-describedby="inputGroup-sizing-lg"/>
</div>
<button class="btn">计算</button>
</div>
<!--<script src="jquery3-3-1/jquery-3.3.1.js"></script>-->
<script src="jquery3-3-1/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".btn").click(function(){		
       var a=$("#FirstNum").val();
	   var b=$("#SecondNum").val();	   
	   var c=$("#SumNum").val();
	   var sumC=parseFloat(a)+parseFloat(b);	
	   var sumCC=parseFloat(c);
	   if(Math.abs(sumC-sumCC)<0.001)
	   {
		   $("#tip").text("Bingo!")
	   }
	   else
	   {
		     $("#tip").text("fool!")
	   }
	   $("#SumNum").removeClass("mygreen");
	   $("#SumNum").addClass("myred");
    });	
	})
</script>
</body>
</html>